<!--
  这里是图标选择的组件,对应的是@/assets/icon文件夹下的图标选择,后续如果需要扩展图标,仅需要在该文件夹下直接添加图标即可
-->
<template>
  <div>
    <el-popover trigger="click">
      <template #reference>
        <div class="el-input" @focus="focus=true" @blur="focus=false"
             @mouseenter="hovering = true"
             @mouseleave="hovering = false"
        >
          <input class="el-input__inner" type="text" :value="value"
                 @input="$emit('input',$event.target.value)"
                 :placeholder="placeholder" clearable readOnly style="padding-left: 30px; cursor: pointer;"/>
          <e-icon class="el-input__prefix" v-if="value" :icon-class="value"
                  style="height: 40px;width: 16px;line-height: 40px;"/>
          <span class="el-input__suffix" @click.stop="clear">
            <span class="el-input__suffix-inner" v-show="showClear()">
              <i class="el-input__icon el-icon-circle-close el-input__clear"></i>
            </span>
          </span>
        </div>
      </template>
      <div class="icon-body">
        <el-input v-model="iconName" class="" clearable placeholder="请输入图标名称" @clear="filterIcons"
                  @input="filterIcons">
          <i slot="suffix" class="el-icon-search el-input__icon"/>
        </el-input>
        <div class="icon-list">
          <div class="list-container">
            <div v-for="(icon, index) in icons" class="icon-item-wrapper" :key="index" @click="selectedIcon(icon)">
              <div :class="['icon-item', { active: value === icon }]">
                <e-icon :icon-class="icon" style="height: 25px;width: 16px;"/>
                <span>{{ icon }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-popover>
  </div>
</template>
<script>
import icons from "./requireIcons";

export default {
  name: 'zIconSelect',
  props: {
    value: {
      required: true,
      type: String,
    },
    placeholder: {
      required: false,
      type: String,
      default: '请选择图标'
    },
    clearable: {
      required: false,
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      iconName: '',
      icons: icons,
      visible: false,
      focus: false,
      hovering: false,
    }
  },
  methods: {
    filterIcons(value) {
      if (value !== '') {
        this.icons = icons.filter(e => e.includes(value))
      } else {
        this.icons = icons
      }
    },
    selectedIcon(value) {
      this.$emit('input', value)
      // 这里是为了触发popover隐藏
      document.body.click()
    },
    clear(){
      this.$emit('input', '')
    },
    showClear(){
      return (this.focus || this.hovering) && this.clearable && this.value !== ''
    }
  },
  mounted() {

  }
}
</script>


<style scoped>
.icon-body {
  width: 460px;
}

.icon-body .icon-list {
  height: 200px;
  overflow: auto;
}

.icon-body .icon-list .list-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.icon-body .icon-list .list-container .icon-item-wrapper {
  width: calc(100% / 3);
  height: 25px;
  line-height: 25px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.icon-body .icon-list .list-container .icon-item-wrapper .icon-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
  height: 100%;
  padding: 0 5px;
}

.icon-body .icon-list .list-container .icon-item-wrapper .icon-item .svg-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.icon-body .icon-list .list-container .icon-item-wrapper .icon-item.active{
  background: #ececec;
  border-radius: 5px;
}
</style>
